<template>
	<view hover-class="friendsListbg" hover-start-time=15 hover-stay-time=200 class="friendsList" @tap="openChat">
		<image :src="item.img"></image>
		<view class="details">
			<view class="nicknameTime">
				<text>{{item.nickname}}</text>
				<text class="time">{{item.time}}</text>
			</view>
			<view class="detailsContent">
				<text>{{item.content}}</text>
				<uni-badge :text="item.number" type="error" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				default: null
			},
			index: {
				type: Number,
				default: 0
			}
		},
		methods: {
			openChat() {
				uni.navigateTo({
					url: "../../chat/chat"
				})
			}
		}
	}
</script>

<style lang="scss">
	.friendsListbg {
		background-color: #F9F9FB;
	}

	.friendsList {
		width: 100vw;
		@include flexCenterCenter;
		padding: 20rpx 25rpx;
		border-bottom: 2rpx solid #EDEDED;

		>image {
			flex-basis: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			margin-right: 25rpx;
		}
	}

	.details {
		flex-grow: 1;
		display: flex;
		flex-direction: column;

		.nicknameTime {
			@include flexBetweenCenter;

			>.time {
				color: #D7D7D7;
				font-size: 0.85rem;
			}
		}

		.detailsContent {
			@include flexBetweenCenter;
			// 计算出view的宽度来
			width: calc(100vw - 100rpx - 25rpx - 25rpx - 25rpx);
			margin-top: 20rpx;

			>text {

				// 文本溢出省略效果(text必须是有宽度值的了)
				&:first-of-type {
					width: 85%;
					color: #BEBEBE;
					@include textEllipsis;
				}
			}
		}
	}
</style>
